<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>
<body>
    <div class="app">
        <div class="top">
            <div class="top-sort">
                <img src="./img/category.png" alt="">
                <img class="roll" src="./img/roll.gif" alt="">
                <img src="./img/login.png" alt="">
            </div>
            <div class="top-search">
                <img src="./img/search.png" alt="">
                <a>运动暖冬 满399减200</a>
            </div>
        </div>

        <!-- 轮播图（静态） -->
        <!-- <ul class="poster">
            <li>
                <img src="./img/slider/banner1.jpg" alt="">
            </li> -->
            <!-- <li>
                <img src="./img/slider/banner2.jpg" alt="">
            </li>
            <li>
                <img src="./img/slider/banner3.png" alt="">
            </li>
            <li>
                <img src="./img/slider/banner4.png" alt="">
            </li>
            <li>
                <img src="./img/slider/banner5.png" alt="">
            </li>
            <li>
                <img src="./img/slider/banner6.jpg" alt="">
            </li>
            <li>
                <img src="./img/slider/banner7.jpg" alt="">
            </li>
            <li>
                <img src="./img/slider/banner8.png" alt="">
            </li> -->
            
        <!-- </ul> -->

        <!-- 轮播图（动态） -->
        <div class="box">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./img/slider/banner1.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/slider/banner2.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/slider/banner3.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/slider/banner4.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/slider/banner5.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/slider/banner6.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/slider/banner7.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/slider/banner8.png" alt="">
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
        </div>
        

        <div class="meetingplace">
            <img src="./img/160802267978677573.gif" alt="">
            <img src="./img/160802268637767581.gif" alt="">
            <img src="./img/160801463461957544.gif" alt="">
        </div>

        <div class="icon">
            <div class="icon-logo">
                <img src="./img/alarm.png" alt="">
                <a class="icon-logo-title">苏宁秒杀</a>
            </div>
            <div class="icon-logo">
                <img src="./img/supermarket.png" alt="">
                <a class="icon-logo-title">苏宁超市</a>
            </div>
            <div class="icon-logo">
                <img src="./img/group-buying .png" alt="">
                <a class="icon-logo-title">苏宁拼购</a>
            </div>
            <div class="icon-logo">
                <img src="./img/digital.png" alt="">
                <a class="icon-logo-title">手机数码</a>
            </div>
            <div class="icon-logo">
                <img src="./img/home-appliances .png" alt="">
                <a class="icon-logo-title">苏宁家电</a>
            </div>
            <div class="icon-logo">
                <img src="./img/free-fruit.png" alt="">
                <a class="icon-logo-title">免费水果</a>
            </div>
            <div class="icon-logo">
                <img src="./img/make-money.png" alt="">
                <a class="icon-logo-title">赚钱消消乐</a>
            </div>
            <div class="icon-logo">
                <img src="./img/sign-in.png" alt="">
                <a class="icon-logo-title">签到有礼</a>
            </div>
            <div class="icon-logo">
                <img src="./img/ticket.png" alt="">
                <a class="icon-logo-title">领劵中心</a>
            </div>
            <div class="icon-logo">
                <img src="./img/more.png" alt="">
                <a class="icon-logo-title">更多频道</a>
            </div>
        </div>

        <div class="gift">
            <img class="gift-img1" src="./img/160415964665844208.png" alt="">
            <img class="gift-img2" src="./img/160415965447533335.gif" alt="">
            <img class="gift-img2"src="./img/160415966314573447.gif" alt="">
        </div>
    </div>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: true,
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        })
    </script>
</body>
</html>